<template>
  <div class="table-toolbar flex-between">
    <a-space>
      <a-button @click="onAdd" type="primary"><plus-outlined />增加</a-button>
      <a-button><copy-outlined />复制</a-button>
      <a-button @click="removeItem"><delete-outlined />删除</a-button>
      <a-divider type="vertical" />
      <a-button>文件名开单</a-button>
      <a-button>表格导入</a-button>
    </a-space>
    <a-space>
      <a-button>命名规则</a-button>
      <a-button>表格模板</a-button>
    </a-space>
  </div>
  <a-table :data-source="data"
           :scroll="{ x: 1400, y: 500 }"
           :columns="columns"
           size="small"
           rowKey="uid" bordered
           :pagination="false"
    :row-selection="{ selectedRowKeys: rowKey, onChange: selectChange }">
    <template #bodyCell="{ column, index }">
      <template v-if="column.key === 'id'">{{ index + 1 }}</template>
      <template v-if="column.key === 'content'">
        <a-input placeholder="内容/项目" v-model:value="data[index].content" :bordered="false" size="small" allowClear />
      </template>
      <template v-if="column.key === 'product'">
        <product-select />
      </template>
      <template v-if="column.key === 'width'">
        <a-input :bordered="false" size="small" v-model:value="data[index].width" class="align-center"/>
      </template>
      <template v-if="column.key === 'height'">
        <a-input :bordered="false" size="small" v-model:value="data[index].height" class="align-center"/>
      </template>
      <template v-if="column.key === 'nums'">
        <a-input :bordered="false" size="small" v-model:value="data[index].nums" class="align-center"/>
      </template>
      <template v-if="column.key === 'area'">
        {{ data[index].area }}
      </template>
      <template v-if="column.key === 'unit'">
        <a-input class="width-max align-center" :bordered="false" placeholder="单位" size="small"
          v-model:value="data[index].unit" />
      </template>
      <template v-if="column.key === 'price'">
        <a-input :bordered="false" size="small" v-model:value="data[index].price" class="align-center"/>
      </template>
      <template v-if="column.key === 'amount'">
        <a-input :bordered="false" size="small" class="align-center" v-model:value="data[index].amount" />
      </template>
      <template v-if="column.key === 'remark'">
        <a-input :bordered="false" size="small" v-model:value="data[index].remark" />
      </template>
    </template>
    <template #summary>
      <a-table-summary-row>
        <a-table-summary-cell :col-span="3">合计</a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
        <a-table-summary-cell class="align-center">{{ numTotal }}</a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
        <a-table-summary-cell class="align-center">{{ amountTotal }}</a-table-summary-cell>
        <a-table-summary-cell></a-table-summary-cell>
      </a-table-summary-row>
    </template>
  </a-table>
</template>
<script setup lang="ts">
import type { TableColumnsType } from "ant-design-vue";
import { PlusOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import { computed, reactive, ref, watch } from "vue";
import { getRandom } from "@/plugin/useFn";
import useMessage from "@/plugin/useMessage";
import unitsMap from '@/plugin/units'
import ProductSelect from "@/views/order/components/ProductSelect.vue";

type sumByKeyType = 'amount' | 'nums' | 'area'

let rowKey = ref<string[]>(),
  data = reactive<OrderType[]>([]),
  numTotal = computed(() => { return sumByKey('nums') }),
  amountTotal = computed(() => { return sumByKey('amount') })

const selectChange = (keys: string[]) => {
  rowKey.value = keys
}

const columns: TableColumnsType = [
  { key: 'id', title: '序号', width: 50, align: 'center',fixed: 'left' },
  { key: 'content', title: '制作内容',fixed: 'left' },
  { key: 'product', title: '产品/材料', width: 240 },
  { key: 'width', title: '宽', width: 70, align: 'center' },
  { key: 'height', title: '高', width: 70, align: 'center' },
  { key: 'nums', title: '数量', width: 60, align: 'center' },
  { key: 'area', title: '面积', width: 80, align: 'center' },
  { key: 'unit', title: '单位', width: 70, align: 'center' },
  { key: 'price', title: '单价', width: 70, align: 'center' },
  { key: 'amount', title: '金额', width: 100, align: 'center' },
  { key: 'remark', title: '备注', width: 120 },
]
//新增行
const onAdd = () => {
  const orderItemTpl: OrderType = {
    uid: getRandom(11),
    content: '',
    product: '',
    width: 0,
    height: 0,
    nums: 1,
    area: 0,
    unit: '',
    price: 0,
    amount: 0,
    remark: ''
  }
  if (data === undefined) {
    data = [orderItemTpl]
  } else {
    data.push(orderItemTpl)
  }
}
/**
 * 删除选中的订单详情项
 */
const removeItem = () => {
  if (rowKey.value) {
    for (var i = data.length - 1; i >= 0; i--) {
      if (rowKey.value.includes(data[i].uid)) {
        data.splice(i, 1);
      }
    }
  } else {
    return useMessage(403, '您未选中任何项')
  }
}
/**
 * 根据列名称统计合值
 * @param key 列名称 'amount'|'nums'|'area'
 */
const sumByKey = (key: sumByKeyType) => {
  let sum: number = 0;
  for (var i = 0; i < data.length; i++) {
    sum += Number(data[i][key])
  }
  return sum;
}
/**
 * 计算面积/长度合计
 * @param index 项索引
 */
const getArea = (index: number) => {
  let area: number = 0;
  if (data[index].unit) {
    if (unitsMap.area.includes(data[index].unit)) {
      area = Number(data[index].width) * Number(data[index].height) * Number(data[index].nums)
    }
    if (unitsMap.length.includes(data[index].unit)) {
      area = Math.max(Number(data[index].width), Number(data[index].height)) * Number(data[index].nums)
    }
    if (unitsMap.quantifier.includes(data[index].unit)) {
      area = Number(data[index].nums)
    }
  } else {
    area = Number(data[index].width) * Number(data[index].height) * Number(data[index].nums)
  }
  data[index].area = Number(area.toFixed(2))
}

//area amount 计算
/**
 * 计算金额
 */
const getAmount = (index: number) => {
    let amount: number = Number(data[index].area) * Number(data[index].price)
    data[index].amount = Number(amount.toFixed(0))
    getArea(index)
  }


watch(data,(value)=>{
  //@ts-ignore
  value.forEach((item,index)=>{
    getArea(index)
    getAmount(index)
  })
})
</script>

<style scoped>
.table-toolbar {
  padding: var(--space-sm);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-sm);
}</style>